<template>
  <h2>XCatalogue 类目录组件</h2>
  <p>类目录组件比类菜单组件多了正文滚动与菜单高亮的联动。</p>

  <h3>基本用法</h3>
  <p>
    x-catalogue 为目录组件，是基础；x-catalogu-content
    为正文组件，可根据业务自行实现；useCatalogue
    用来衔接这两个组件的交互，可根据业务自行实现。
  </p>
  <!-- prettier-ignore -->
  <code-demo>
    <div style="display: flex">
      <x-catalogue-menu
        ref="menuRef"
        :data="data"
        @clickMenuItem="clickMenuItem"
      ></x-catalogue-menu>
      <x-catalogue-content
        style="flex: 1; height: 300px"
        ref="contentRef"
        :data="data"
        @scroll="scrollContent"
      >
        <template #0>
          <div style="height: 200px">我是XMenu</div>
        </template>
        <template #0-0>
          <div style="height: 200px">我是基本使用</div>
        </template>
      </x-catalogue-content>
    </div>

    <template #code>
      {{ `
<template>
  <div style="display: flex">
    <x-catalogue-menu
      ref="menuRef"
      :data="data"
      @clickMenuItem="clickMenuItem"
    ></x-catalogue-menu>
    <x-catalogue-content
      style="flex: 1; height: 300px"
      ref="contentRef"
      :data="data"
      @scroll="scrollContent"
    >
      <template #0>
        <div style="height: 200px">我是XMenu</div>
      </template>
      <template #0-0>
        <div style="height: 200px">我是基本使用</div>
      </template>
    </x-catalogue-content>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import useCatalogue from 'ui-lib/components/menu/x-catalogue/useCatalogue'

const menuRef = ref()
const contentRef = ref()
const { clickMenuItem, scrollContent } = useCatalogue({
  menuRef,
  contentRef,
})

// 插入 index
function insertIndex(data, indexKey = 'index') {
  function recursive(arr, parentId) {
    arr.forEach(function (item, index) {
      const id = parentId ? \`\${parentId}-\${index}\` : \`\${index}\`
      item[indexKey] = id
      item?.children?.length && recursive(item.children, id)
    })
  }
  recursive(data)
  return data
}

const data = insertIndex([
  {
    title: 'XMenu',
    children: [
      { title: '基本使用' },
      { title: '结合 Element Plus' },
      { title: 'Attribute' },
    ],
  },
  {
    title: 'XCatalogue',
    children: [
      { title: '基本使用' },
      { title: 'Attribute' }
    ],
  },
])
</script>
      ` }}
      <div>
        
      </div>
    </template>
  </code-demo>
</template>

<script setup>
import { ref } from 'vue'
import useCatalogue from 'ui-lib/components/menu/x-catalogue/useCatalogue'

const menuRef = ref()
const contentRef = ref()
const { clickMenuItem, scrollContent } = useCatalogue({
  menuRef,
  contentRef,
})

// 插入 index
function insertIndex(data, indexKey = 'index') {
  function recursive(arr, parentId) {
    arr.forEach(function (item, index) {
      const id = parentId ? `${parentId}-${index}` : `${index}`
      item[indexKey] = id
      item?.children?.length && recursive(item.children, id)
    })
  }
  recursive(data)
  return data
}

const data = insertIndex([
  {
    title: 'XMenu',
    children: [
      { title: '基本使用' },
      { title: '结合 Element Plus' },
      { title: 'Attribute' },
    ],
  },
  {
    title: 'XCatalogue',
    children: [{ title: '基本使用' }, { title: 'Attribute' }],
  },
])
</script>
